{layout name="common/layout" /}

<style>
    .bg-coupon {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://images.unsplash.com/photo-1507608869274-d3177c8bb4c7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .bg-coupon .content {
        color: #ffffff;
        text-align: center;
    }

    .bg-coupon .content h1 {
        font-size: 45px;
    }

    .bg-coupon .title, .bg-coupon .c-btn {
        padding: 15px 0;
    }

    .bg-coupon .btn-lg {
        width: 50%;
    }

    .bg-coupon .title {
        font-size: 22px;
        color: #bbb;
    }

    .coupon {
        border-radius: 5px;
        margin-bottom: 30px;
        background: #fff;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .coupon .coupon-left {
        width: 70%;
        position: relative;
        min-height: 117px;
        border-right: 1px dashed #ddd;
    }

    .coupon .coupon-left a:hover {
        text-decoration: none;
    }

    .coupon .coupon-right {
        width: 30%;
        height: 100%;
        vertical-align: middle;
    }

    .coupon .coupon-left .content {
        display: flex;
    }

    .coupon .coupon-left .content .content-left {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        font-weight: bold;
        color: #e74c3c;
    }

    .coupon .coupon-left .content .content-left .small {
        font-size: 8px;
        padding-bottom: 5px;
        font-weight: normal;
        margin-left: 5px;
    }

    .coupon .coupon-left .content .content-left .money {
        display: flex;
        align-items: flex-end;
    }

    .coupon .coupon-left .content .content-right {
        width: 70%;
    }

    .coupon .coupon-text {
        padding: 15px 0px;
    }

    .coupon .coupon-text h4 {
        color: #007bff;
    }

    .coupon .coupon-text .intro {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 5px;
    }

    .coupon .coupon-right .info {
        width: 100%;
        padding: 15px;
    }

    .coupon .coupon-left .content::before {
        top: -10px;
        right: -10px;
    }

    .coupon .coupon-left .content::after {
        bottom: -10px;
        right: -10px;
    }

    .coupon .coupon-left .content::after,
    .coupon .coupon-left .content::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: #f4f6f8;
        border-radius: 100%;
    }

</style>

<div class="bg-coupon">
    <div class="content">
        <h1>
            优惠券
        </h1>
        <div class="title">领取优惠券享更多优惠</div>
    </div>
</div>
<div class="container" id="content-container">

    <div>
        <!--@formatter:off-->
        <ul class="nav nav-tabs nav-filter" style="margin-bottom: 15px;">
            <li class="{eq name="result" value=""}active{/eq}">
                <a href="?">全部</a>
            </li>
            <li class="{eq name="result" value="1"}active{/eq}">
                <a href="?result=1">满减券</a>
            </li>
            <li class="{eq name="result" value="0"}active{/eq}">
                <a href="?result=0">折扣券</a>
            </li>
        </ul>
        <!--@formatter:on-->
        <div id="" class="tab-content">
            <div class="row">
                {foreach name="couponList" item="item"}
                <div class="col-md-4 col-xs-12 col-sm-6 ">
                    <div class="coupon">
                        <div class="coupon-left">
                            <a href="{$item.url}">
                                <div class="content">
                                    <div class="content-left">
                                        <div class="money">
                                            <span>{$item['result_data']['number']}</span>
                                            <span class="small">{:$item.result==1?'元':'折'}</span>
                                        </div>
                                    </div>
                                    <div class="content-right">
                                        <div class="coupon-text">
                                            <h4 class="intro mb-2">
                                                {$item.name}
                                            </h4>
                                            <p class="intro">
                                                订单满 <span class="text-warning">{$item['result_data']['money']} 元 </span>
                                                {eq name="item.result" value="1"} 减 {else/} 打 {/eq}
                                                <span class="text-warning">
                                                {$item['result_data']['number']}
                                                {eq name="item.result" value="1"} 元 {else/} 折 {/eq}
                                               </span>
                                            </p>
                                            <p class="intro text-muted">
                                                每人限领{$item.allow_num}张
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="coupon-right">
                            <div class="info">
                                {if $item.is_received}
                                <a href="javascript:;" class="btn btn-default btn-block">
                                    已领取
                                </a>
                                {elseif $item.has_more}
                                <a href="javascript:;" class="btn btn-default btn-block">
                                    已被领完
                                </a>
                                {elseif $item.expired && !$item.is_received}
                                <a href="javascript:;" class="btn btn-default btn-block">
                                    已过期
                                </a>
                                {elseif !$item.online}
                                <a href="javascript:;" class="btn btn-default btn-block">
                                    未到领取时间
                                </a>
                                {else/}
                                <a href="{$item.url}" class="btn btn-danger btn-block" data-name="{$item.id}">
                                    立即领取
                                </a>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
            {if $couponList->isEmpty()}
            <div class="text-center">暂无相关优惠券</div>
            {/if}
            <div class="pager">
                <ul class="pagination">
                    {$couponList->render()}
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<script data-render="script" src="__ADDON__/js/coupon.js?v={$site.version}"></script>
